<template lang="html">
    <div id="pay">
        <div class="address">
            <div>
                <p v-if="addInfo == ''"><span>添加新地址</span></p>
                <p v-if="addInfo != ''"><span v-text="'收货人:' + addInfo.name"></span><b v-text="addInfo.tel"></b></p>
                <h4 v-text="'北京市'+ area + addInfo.address" v-if="addInfo != ''"></h4>
            </div>
            <h3 @click="fileAdd()" v-if="addInfo != ''">修改地址</h3>
            <h3 @click="fileAdd()" v-if="addInfo == ''">请准确填写您的地址</h3>
        </div>

        <!-- 填写地址默认隐藏，点击时出现 -->
        <div class="yourAdd" v-if="flag" @click="close()">
            <div class="fileIn" @click.stop="">
                <dl class="">
                    <dt>收货人姓名:</dt>
                    <dd><input type="text" v-model="name" @blur="checkName(name)"></dd>
                </dl>
                <dl class="">
                    <dt>手机号码:</dt>
                    <dd><input type="tel" name="tel" value="" v-model="tel" @blur="checkTel(tel)" ref="reg" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();"></dd>
                </dl>
                <!-- 电话输入不正确的提示信息 -->
                <div class="notice" v-if="noteTel">手机号码格式不正确</div>

                <dl class="">
                    <dt>所在地区:</dt>
                    <dd>北京市
                        <select v-model="area" value="昌平区" name="city">
                            <option v-for="area in citys" v-text="area" value="选区"></option>
                        </select>
                    </dd>
                </dl>
                <dl class="">
                    <dt>街道地址:</dt>
                    <dd><textarea name="detail" v-model="address" @blur="checkAdd(address)"></textarea></dd>
                </dl>
                <p type="button" name="button" @click='saveInfo({"name": name, "tel": tel, "address": address})'>保存</p>
            </div>
        </div>

        <p>支付方式</p>
        <ul>
            <li class="payTool">
                <input id="zhifubao" type="radio" name="payWay" value="" checked><i></i>
                <label for="zhifubao"><img src="../../assets/images/zfb.png">
                <span>支付宝支付</span></label>
            </li>
            <li class="payTool">
                <input id="wechat" type="radio" name="payWay" value=""><i></i>
                <label for="wechat"><img src="../../assets/images/weixin.png">
                <span>微信支付</span></label>
            </li>
            <li class="payTool">
                <input id="yinlian" type="radio" name="payWay" value=""><i></i>
                <label for="yinlian"><img src="../../assets/images/unionpay.png">
                <span>银联支付</span></label>
            </li>
        </ul>

        <div class="goodInfo" v-for="item in list">
            <p class="shopName" v-text="item.shop_info.cn_name"></p>
            <div class="needShow">
                <img :src="item.image_urls_head[0]" alt="">
                <div class="des">
                    <h2 v-text="item.title"></h2>
                    <p><span v-text="item.thisColor + ';'" v-if="item.hasOwnProperty('thisColor')"></span><span v-text="item.size" v-if="item.hasOwnProperty('size')"></span></p>
                </div>
                <div class="price">
                    <p v-text="'￥'+ item.low_price.toFixed(2)"></p>
                    <span v-text="'x '+ item.count +'件'"></span>
                </div>
            </div>
            <h3>商品总价: ￥<em v-text="(item.low_price*item.count).toFixed(2)"></em></h3>
            <div class="leaveMsg">
                <textarea name="name" placeholder="给卖家留言"></textarea>
            </div>
        </div>

        <div class="justspa"></div>

        <div class="totalPrice">
            <span>合计：</span>
            <em v-text="'￥'+ totalPrice.toFixed(2)"></em>
            <b @click="toPay()">去支付</b>
        </div>

        <div class="flag2" v-if="flag2">
            <div class="box">
                <p>请填写收货信息</p>
                <button type="button" name="button" @click="close2()">确定</button>
            </div>
        </div>
    </div>
</template>

<script>
var addList = JSON.parse( sessionStorage.getItem('addList') )|| [];
export default {
    data () {
        return {
            flag: false,
            flag2: false,
            name: '',
            tel: '',
            address: '',
            area: '',
            citys: ['海淀区','东城区','西城区','朝阳区','崇文区','宣武区','石景山区','门头沟区','丰台区','房山区','大兴区','通州区','顺义区','平谷区','昌平区','怀柔区'],
            list: [],
            totalPrice: 0,
            noteTel: false,
            checktel: false,
            checkname: false,
            checkaddress: false,
            // 地址信息的本地数据
            addInfo: addList
        }
    },
    methods: {
        fileAdd () {
            this.flag = true;
            return this.flag;
        },
        close () {
            this.flag = false;
            return this.flag;
        },
        close2 () {
            this.flag2 = false;
            return this.flag2;
        },
        // 接收购物车或者立即购买传过来的需要付款的数据
        send () {
            var result = JSON.parse( sessionStorage.getItem('goodslist') );
            for (var i = 0; i < result.length; i++) {
                if (result[i].isCheck == true) {
                    this.list.push(result[i])
                }
            }
            return this.list;
        },
        // 计算总价格
        totalPay () {
            for (var i = 0; i < this.list.length; i++) {
                this.totalPrice += this.list[i].low_price*this.list[i].count
            }
            return this.totalPrice;
        },
        // 检查电话格式，名字地址是否为空。只有都未TRUE时才能操作
        checkTel (tel) {
            var reg=/^1[34578]\d{9}|\d{4}-\d{7}|\d{4}-\d{8}|\d{3}-\d{8}$/;
            if(reg.test(tel) == false){
                this.tel = '';
                this.checktel = false;
                var that = this;
        		that.noteTel = true;
                setTimeout (function () {
                    that.noteTel = false;
                }, 1000);
        	}
            this.checktel = true;
        },
        checkName (name) {
            if (name != '') {
                this.checkname = true;
            }
        },
        checkAdd (address) {
            if (address != '') {
                this.checkaddress = true;
            }
        },
        // 保存地址信息
        saveInfo (info) {
            if (this.checktel == true && this.checkname == true && this.checkaddress == true) {
                sessionStorage.setItem("addList", JSON.stringify(info));
                this.addInfo = JSON.parse( sessionStorage.getItem('addList') );
                // console.log(this.addInfo);
                this.close();
                return this.addInfo;
            }
            this.close();
            return this.addInfo;
        },
        // 确认付款时，判断地址是否填写正确，正确就跳转
        toPay () {
            if (this.addInfo != '') {
                var result = JSON.parse( sessionStorage.getItem('goodslist') );
                var arr =[]
                for (var i = 0; i < result.length; i++) {
                    if (result[i].isCheck != true) {
                        arr.push(result[i]);
                    }
                }
                sessionStorage.removeItem('goodslist');
                sessionStorage.setItem("goodslist", JSON.stringify(arr));
                window.location = "https://auth.alipay.com/login/index.htm";
            } else {
                this.flag2 = true;
            }
        }
    },
    created () {
        this.send ();
        this.totalPay();
    }
}
</script>

<style lang="css" scoped>
#pay{
    height: 100%;
    padding: 10px;
    background: #F7F7F7;
    position: fixed;
    overflow-x: hidden;
    overflow-y: scroll;
    top: 0;
    left: 0;
    z-index: 11;
    padding-top: 0.1px;
}
.notice{
    position: fixed;
    top: 31%;
    left: 35%;
    z-index: 20;
    color: red;
    background: #ddd;
    padding: 5px 10px;
    border-radius: 10px;
}
/*信息不正确点提交的时候*/
.flag2{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15;
}
.flag2 .box{
    width: 19.67rem;
    height: 5rem;
    padding: 1.67rem .83rem;
    background: #FFFFFF;
    border-radius: 3px;
    margin: 75% auto;
    text-align: center;
}
.flag2 .box p{
    color: #666;
}
.flag2 .box button {
    width: 5rem;
    height: 2.5rem;
    color: #fff;
    font-size: 16px;
    background: #fe3355;
    border: 0;
    border-radius: 3px;
    margin-top: 20px;
    outline: none;
}
/*点击弹出地址输入框*/
.yourAdd{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15;
}
.yourAdd .fileIn{
    width: 21.2rem;
    height: 25rem;
    position: relative;
    z-index: 20;
    padding: 2.92rem 1.67rem 3.33rem 1.67rem;
    background: #fff;
    border-radius: 5px;
    margin: 30% auto 0 auto;
}
.yourAdd .fileIn dl{
    width: 21.17rem;
    height: 2.33rem;
    line-height: 2.5rem;
    padding-bottom: .67rem;
    margin-bottom: .83rem;
    border-bottom: solid 1px #eee;
}
.yourAdd .fileIn dl dt{
    float: left;
    width: 6.67rem;
    color: #666;
    font-size: 13px;
}
.yourAdd .fileIn dl dd{
    float: left;
    width: 14.17rem;
    color: #333;
    overflow: hidden;
}
.yourAdd .fileIn dl dd input{
    outline: none;
    color: #333;
    font-size: 16px;
}
.yourAdd .fileIn dl dd{
    color: #333;
    font-size: 16px;
}
.yourAdd .fileIn dl dd select{
    outline: none;
    color: #333;
    font-size: 16px;
}
.yourAdd .fileIn dl:last-of-type{
    border: 0;
    height: 5.17rem;
}
.yourAdd .fileIn dl:last-of-type dd textarea{
    height: 4.33rem;
    overflow-y: scroll;
    line-height: 1.67rem;
    font-size: 14px;
    resize: none;
    outline: none;
}
.yourAdd .fileIn p{
    width: 13.67rem;
    height: 2.83rem;
    line-height: 2.83rem;
    text-align: center;
    margin-top: 30px;
    font-size: 12px;
    color: #fff;
    background: rgb(223, 49, 48);
    border-radius: 5px;
    margin: 4rem auto 0 auto;
}
#pay .address{
    width: 23.33rem;
    padding: 20px 10px 10px 10px;
    margin-top: 10px;
    background: url(../../assets/images/address-bg.png) 5px 0/75px 10px repeat-x;
    background-color: #fff;
}
#pay .address div{
    border-bottom: 1px solid #FBF4F4;
    margin-bottom: 5px;
    padding-bottom: 8px;
}
#pay .address div p{
    width: 23.33rem;
    line-height: 2rem;
    color: #666;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    padding: 0;
}
#pay .address div p:after{
    content: '';
    display: block;
    height: 0;
    clear: both;
}
#pay .address div p span{
    float: left;
}
#pay .address div p b{
    float: right;
}
#pay .address div h4{
    height: 1.67rem;
    line-height: 1.67rem;
    padding-top: 5px;
    color: #ccc;
    font-size: 12px;
}
#pay .address h3{
    width: 22.5rem;
    height: 2rem;
    line-height: 1.7rem;
    padding: .83rem .83rem 0 2rem;
    background: url(../../assets/images/location.png) 0 65% / 16px 16px no-repeat, url(../../assets/images/rt.png) 22.5rem 65% / 10px 15px no-repeat;
    color: #666;
    font-size: 16px;
}
#pay >  p{
    width: 24.17rem;
    height: 3.33rem;
    margin-top: 10px;
    padding-left: 10px;
    color: #666;
    height: 3.33rem;
    line-height: 3.33rem;
    font-size: 16px;
    background: #fff;
    border-bottom: solid 1px #f7f7f7;
}
#pay >  ul{
    width: 25rem;
    background: #fff;
}
#pay >  ul li{
    height: 2.75rem;
    line-height: 2.75rem;
    border-bottom: solid 1px #f7f7f7;
    padding: 10px 10px 10px 0;
    position: relative;
}
#pay >  ul li input{
    width: 1.33rem;
    height: 1.33rem;
    position: absolute;
    left: .79rem;
    top: 1.47rem;
    z-index: 13;
    opacity: 0;
}
#pay >  ul li i{
    width: 1.33rem;
    height: 1.33rem;
    position: absolute;
    left: .79rem;
    top: 1.47rem;
    border: 0;
    background: url(../../assets/images/noxz.png) no-repeat;
    background-size: 100% 100%;
}
#pay >  ul li input:checked ~i{
    background: url(../../assets/images/choose.png)0 0/ 100% 100% no-repeat !important;
}
#pay >  ul li img{
    float: left;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 5px;
    margin-left: 3.5rem;
}
#pay >  ul li span{
    font-size: 16px;
    color: #444;
}
#pay >  .goodInfo{
    width: 25rem;
    background: #fff;
    padding-bottom: 10px;
    margin-top: .83rem;
}
#pay >  .justspa{
    height: 5rem;
}
#pay >  .goodInfo .shopName{
    width: 23.33rem;
    height: 2rem;
    padding: .83rem 0 .83rem 3.33rem;
    color: #333;
    font-size: 16px;
    border-bottom: solid 1px #f7f7f7;
    background: url(../../assets/images/shopIcon2.png) 10px center / 16px 16px no-repeat;
}
#pay >  .goodInfo .needShow{
    width: 23.33rem;
    height: 6.83rem;
    border-bottom: solid 1px #f7f7f7;
    padding: 10px;
}
#pay >  .goodInfo .needShow img{
    float: left;
    width: 6.67rem;
    height: 6.67rem;
    margin-right: 10px;
}
#pay >  .goodInfo .needShow .des{
    float: left;
    width: 10rem;
    height: 7rem;
}
#pay >  .goodInfo .needShow .des h2{
    height: 36px;
    line-height: 18px;
    margin-bottom: 30px;
    font-size: 14px;
    overflow: hidden;
    color: #666;
}
#pay >  .goodInfo .needShow .des p{
    height: 1.5rem;
    line-height: 1.5rem;
    padding: 0;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #CCC;
}
#pay >  .goodInfo .needShow .price{
    float: right;
    text-align: right;
}
#pay >  .goodInfo .needShow .price p{
    color: #fe3355;
    font-size: 16px;
}
#pay >  .goodInfo .needShow .price span{
    color: #c7bdbd;
    font-size: 13px;
}
#pay >  .goodInfo > h3{
    width: 23.33rem;
    height: 1.58rem;
    padding: 10px 10px 0 10px;
    color: #666;
    font-size: 13px;
}
#pay >  .goodInfo > h3 em{
    color: #fe3355;
    font-size: 12px;
}
#pay >  .goodInfo .leaveMsg{
    width: 21.67rem;
    height: 2.92rem;
    padding: 10px;
    background: #F7F7F7;
    overflow-y: scroll;
    margin: 10px 10px 0 10px;
}
#pay > .goodInfo .leaveMsg textarea{
    border: 0;
    width: 19.25rem;
    height: 2.08rem;
    outline: none;
    resize: none;
    padding: 0 5px 5px 18px;
    background: url(../../assets/images/srwb.png) left 2px /12px 12px no-repeat;
    background-color: #F7F7F7;
}
#pay > .totalPrice{
    width: 25rem;
    height: 3.33rem;
    line-height: 3.33rem;
    padding: 5px 10px 5px 15px;
    background: #fff;
    border-top: 1px solid #ddd;
    position: fixed;
    bottom: 0;
    left: 0;
}
#pay > .totalPrice span{
    color: #83797c;
    font-size: 16px;
}
#pay > .totalPrice em{
    color: #fe3355;
    font-size: 18px;
}
#pay > .totalPrice b{
    float: right;
    width: 11.67rem;
    height: 3.33rem;
    line-height: 3.33rem;
    text-align: center;
    color: #fff;
    font-size: 16px;
    background: rgb(223, 49, 48);
}
</style>
